<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no"></meta>
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			html,body{
				height: 100%;
				width: 100%;
				overflow: hidden;
			}
			#wrap,ul,ul>li{
				height: 100%;
			}
			ul>li{
				/* 背景图片 */
				background: url(../images/bg.jpg);
				background-size:500px 500px ;
				background-repeat: no-repeat;
			}
			canvas{
				position: absolute;
				left: 0;
				top: 0;
				transition:1s;
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<canvas></canvas>
			<ul>
				<li></li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		window.onload=function(){
			var canvas = document.querySelector("canvas");
			// 设置canvas的高宽
//			canvas.width = document.documentElement.clientWidth/2;
//			canvas.height = document.documentElement.clientHeight/2;
			canvas.width = 500;
			canvas.height = 500;
			if(canvas.getContext){
				var ctx = canvas.getContext("2d");
				var img = new Image();
				// 前景图片
				img.src="../images/fg.jpg";
				img.onload=function(){
					draw();
				}
				
				
				function draw(){
					var flag =0;
					// 图片填充到cavans
					ctx.drawImage(img,0,0,canvas.width,canvas.height);
					
					// 
					canvas.addEventListener("touchstart",function(ev){
						ev = ev||event;
						var touchC = ev.changedTouches[0];
						
						var x = touchC.clientX - canvas.offsetLeft;
						var y = touchC.clientY - canvas.offsetTop;
						
						
						ctx.globalCompositeOperation="destination-out";
						ctx.lineWidth=40;
						ctx.lineCap="round";
						ctx.lineJoin="round";
						ctx.save();
						ctx.beginPath();
//						ctx.arc(x,y,20,0,360*Math.PI/180);
						ctx.moveTo(x,y);
						ctx.lineTo(x+1,y+1)
						ctx.stroke();
						ctx.restore();
					})
					
					// 按住画笔移动
					canvas.addEventListener("touchmove",function(ev){
						ev = ev||event;
						var touchC = ev.changedTouches[0];
						
						var x = touchC.clientX - canvas.offsetLeft;
						var y = touchC.clientY - canvas.offsetTop;
						
						ctx.save();
//						ctx.arc(x,y,20,0,360*Math.PI/180);
						ctx.lineCap="round";//线段末端的属性
						ctx.lineJoin="round";//链接处的处理
						ctx.lineWidth=40;//线宽 
						ctx.lineTo(x,y)
						ctx.stroke();
						ctx.restore();
					})
					
					// 画笔接触后
					canvas.addEventListener("touchend",function(){
						var imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
						var allPx = imgData.width * imgData.height;
						for(var i=0;i<allPx;i++){
							if(imgData.data[4*i+3]===0){
								flag++;
							}
						}
						
						if(flag>=allPx/2){
							canvas.style.opacity=0;
						}
					})
				
					canvas.addEventListener("transitionend",function(){
						this.remove();
					})
				}
			}
		}
		
		
	</script>
</html>
